<template>
  <div ref="canvasBoxRef" class="w-full h-full ">
    <canvas class="absolute top-0 left-0" id="myCanvas" :width="canvasWH.width" :height="canvasWH.height"></canvas>
  </div>
</template>
<script setup lang="ts">
import loginBgi from '@/assets/login.png'
var canvas = null as HTMLCanvasElement;
var ctx = null as CanvasRenderingContext2D;
var balls = [];

const canvasWH = ref({
  width: 0,
  height: 0
})
const canvasBoxRef = ref()
const resizeObserver = new ResizeObserver(entries => {
  canvasWH.value.width = canvasBoxRef.value.clientWidth - 1;
  canvasWH.value.height = canvasBoxRef.value.clientHeight - 1;
  canvas.width = canvasBoxRef.value.clientWidth - 1;
  canvas.height = canvasBoxRef.value.clientHeight - 1;
  balls.length = 0
  for (var i = 0; i < 300; i++) {
    var ball = new Ball();
    balls.push(ball);
  }
});
onMounted(() => {
  // canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
  var img = new Image();
  img.src = loginBgi;
  img.onload = function () {
    canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
    canvas.style.backgroundImage = "url(" + img.src + ")";
    canvas.style.backgroundSize = "100% 100%";
    canvasWH.value.width = canvas.width = canvasBoxRef.value.clientWidth;
    canvasWH.value.height = canvas.height = canvasBoxRef.value.clientHeight;
    ctx = canvas.getContext("2d");
    for (var i = 0; i < 300; i++) {
      var ball = new Ball();
      balls.push(ball);
    }
    canvas.onmousemove = function (e) {
      var ev = e;
      mouseX = ev.offsetX;
      mouseY = ev.offsetY;
    }
    resizeObserver.observe(canvasBoxRef.value);
    main();
  }
})
onUnmounted(() => {
  resizeObserver.disconnect();
});
//创建小球的构造函数
function Ball() {
  this.x = randomNum(3, canvas.width - 3);
  this.y = randomNum(3, canvas.height - 3);
  this.r = randomNum(1, 2);
  this.color = randomColor();
  this.speedX = randomNum(-3, 3) * 0.15;
  this.speedY = randomNum(-3, 3) * 0.15;
}
Ball.prototype = {
  //绘制小球
  draw: function () {
    ctx.beginPath();
    ctx.globalAlpha = 1;
    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    ctx.fill();
  },
  //小球移动
  move: function () {
    this.x += this.speedX;
    this.y += this.speedY;
    //为了合理性,设置极限值
    if (this.x <= 3 || this.x > canvas.width - 3) {
      this.speedX *= -1;
    }
    if (this.y <= 3 || this.y >= canvas.height - 3) {
      this.speedY *= -1;
    }
  }
}


function main() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  //鼠标移动绘制线				
  mouseLine();
  //小球与小球之间自动画线
  drawLine();
  //使用关键帧动画，不断的绘制和清除
  window.requestAnimationFrame(main);
}
//添加鼠标移动事件
//记录鼠标移动时的mouseX坐标
var mouseX;
var mouseY;

//判断是否划线

function drawLine() {
  for (var i = 0; i < balls.length; i++) {
    balls[i].draw();
    balls[i].move();
    for (var j = 0; j < balls.length; j++) {
      if (i != j) {
        if (Math.sqrt(Math.pow((balls[i].x - balls[j].x), 2) + Math.pow((balls[i].y - balls[j].y), 2)) < 80) {
          ctx.beginPath();
          ctx.moveTo(balls[i].x, balls[i].y);
          ctx.lineTo(balls[j].x, balls[j].y);
          ctx.strokeStyle = "white";
          ctx.globalAlpha = 0.2;
          ctx.lineWidth = 0.5;
          ctx.stroke();
        }
      }
    }
  }
}
//使用鼠标移动划线

function mouseLine() {
  for (var i = 0; i < balls.length; i++) {
    if (Math.sqrt(Math.pow((balls[i].x - mouseX), 2) + Math.pow((balls[i].y - mouseY), 2)) < 80) {
      ctx.beginPath();
      ctx.moveTo(balls[i].x, balls[i].y);
      ctx.lineTo(mouseX, mouseY);
      ctx.strokeStyle = "white";
      ctx.globalAlpha = 0.8;
      ctx.stroke();
    }
  }
}
//随机函数

function randomNum(m, n) {
  return Math.floor(Math.random() * (n - m + 1) + m);
}
//随机颜色

function randomColor() {
  // return "rgb(" + randomNum(0, 255) + "," + randomNum(0, 255) + "," + randomNum(0, 255) + ")";
  return "#d6d6d6";
}



</script>
<style lang="scss" scoped></style>